@charset "utf-8";
// sass 基础依赖
@import '../basic/variables';
@import '../basic/mixins';
.max-width {
    width: 100%;
}
.min-width {
    margin: 0 auto;
    width: 1200px;
}
.header {
    background: #fff;
    height: 89px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-content: center;
    .header-logo {
        display: flex;
        align-items: center;
        img {
            width: 163px;
            height: 44px;
        }
    }
    .header-nav-bar {
        display: flex;
        align-items: center;
        .header-nav-list {
            margin: 0;
            padding-left: 0;
            display: flex;
            list-style: none;
            li {
                cursor: pointer;
                font-size: 16px;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                margin-right: 68px;
                line-height: 1;
                &:last-of-type {
                    margin-right: 33px;
                }
            }
            .header-nav-item-active {
                color: rgba(11, 209, 150, 1);
                font-weight: 500;
            }
        }
        .header-nav-btn {
            cursor: pointer;
            width: 102px;
            height: 42px;
            background: rgba(11, 209, 150, 1);
            border-radius: 21px;
            display: flex;
            justify-content: center;
            span {
                align-self: center;
                font-size: 16px;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
            }
        }
    }
}
.banner-box {
    width: 100%;
    height: 709px;
    background-image: url('../../static/images/bannerbg.png');
    background-size: cover;
}
.banner-content {
    display: flex;
    justify-content: space-between;
    .banner-content-left {
        margin-top: 175px;
        .banner-content-left-title {
            margin: 0;
            font-size: 40px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }
        .banner-content-left-btn {
            display: flex;
            margin-top: 60px;
            cursor: pointer;
            div {
                display: flex;
                align-items: center;
                justify-content: center;
                &:first-of-type {
                    width: 210px;
                    height: 60px;
                    background: linear-gradient(
                        90deg,
                        rgba(250, 250, 250, 1),
                        rgba(236, 255, 253, 1)
                    );
                    box-shadow: 0px 0px 17px 0px rgba(4, 178, 142, 1);
                    border-radius: 30px;
                    span {
                        font-size: 22px;
                        font-weight: 400;
                        color: rgba(11, 209, 150, 1);
                    }
                }
                &:last-of-type {
                    margin-left: 50px;
                    width: 210px;
                    height: 60px;
                    background: #eee;
                    box-shadow: 0px 0px 17px 0px rgba(4, 178, 142, 1);
                    border-radius: 30px;
                    span {
                        font-size: 22px;
                        font-weight: 400;
                        color: #ababab;
                    }
                }
            }
        }
    }
    .banner-content-right {
        width: 441px;
        height: 636px;
        margin-top: 73px;
        margin-right: 60px;
        img {
            display: block;
            width: 441px;
            height: 636px;
        }
    }
}
.features {
    margin-top: 137px;
    padding-bottom: 117px;
    .features-list {
        padding-left: 0;
        list-style: none;
        display: flex;
        justify-content: space-around;
        li {
            width: 210px;
            text-align: center;
            img {
                margin: 0 auto;
                display: block;
                @include square(140px);
            }
            dl {
                margin-top: 15px;
                margin-bottom: 0;
                dt {
                    text-align: center;
                    font-size: 18px;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                }
                dd {
                    margin-top: 12px;
                    margin-left: 0;
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(119, 119, 119, 1);
                    line-height: 2;
                }
            }
        }
    }
}
.gray-color {
    background: rgba(250, 250, 250, 1);
}
.advantage {
    .title {
        padding-top: 79px;
        margin-bottom: 91px;
        width: 330px;
        display: flex;
        align-items: baseline;
        position: relative;
        h1 {
            margin: 0;
            font-size: 32px;
            font-weight: 400;
            color: rgba(11, 209, 150, 1);
        }
        span {
            position: absolute;
            right: 10px;
            bottom: -7px;
            display: block;
            font-size: 24px;
            font-weight: bold;
            font-style: italic;
            color: rgba(0, 213, 115, 1);
            opacity: 0.15;
        }
    }
}
.advantage-msg {
    display: flex;
    padding-bottom: 90px;
    .advantage-msg-left {
        margin-right: 237px;
        dl {
            width: 406px;
            line-height: 1.6;
            dt {
                font-size: 18px;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                margin-bottom: 12px;
            }
            dd {
                margin-left: 0;
                font-size: 14px;
                font-weight: 400;
                color: rgba(119, 119, 119, 1);
            }
        }
    }
    .advantage-msg-right {
        width: 390px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .advantage-msg-right-img {
            margin-top: -90px;
            display: block;
            width: 357px;
            height: 284px;
        }
        .advantage-msg-right-list {
            display: flex;
            width: 390px;
            justify-content: space-between;
            padding-left: 0;
            list-style: none;
            li {
                width: 74px;
                text-align: center;
                img {
                    display: block;
                    @include square(74px);
                }
                span {
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                    font-weight: 400;
                }
            }
        }
    }
}
.backend {
    padding-bottom: 90px;
    .title {
        padding-top: 79px;
        margin-bottom: 91px;
        width: 490px;
        display: flex;
        align-items: baseline;
        position: relative;
        h1 {
            margin: 0;
            font-size: 32px;
            font-weight: 400;
            color: rgba(11, 209, 150, 1);
        }
        span {
            position: absolute;
            right: 10px;
            bottom: -7px;
            display: block;
            font-size: 24px;
            font-weight: bold;
            font-style: italic;
            color: rgba(0, 213, 115, 1);
            opacity: 0.15;
        }
    }
    .backend-list {
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        li {
            width: 310px;
            display: flex;
            margin-right: 90px;
            img {
                margin-top: 6px;
                display: block;
                flex: none;
                @include square(74px);
            }
            div {
                margin-left: 15px;
                h1 {
                    font-size: 18px;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                }
                p {
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(119, 119, 119, 1);
                    line-height: 22px;
                }
            }
        }
    }
}
.contact {
    padding-bottom: 130px;
    .title {
        padding-top: 79px;
        margin-bottom: 51px;
        width: 205px;
        display: flex;
        align-items: baseline;
        position: relative;
        h1 {
            margin: 0;
            font-size: 32px;
            font-weight: 400;
            color: rgba(11, 209, 150, 1);
        }
        span {
            position: absolute;
            right: 10px;
            bottom: -7px;
            display: block;
            font-size: 24px;
            font-weight: bold;
            font-style: italic;
            color: rgba(0, 213, 115, 1);
            opacity: 0.15;
        }
    }
    .contact-list {
        display: flex;
        .contact-item {
            display: flex;
            &:first-child {
                .contact-item-left {
                    width: 72px;
                }
                .contact-item-right {
                    margin-left: -60px;
                }
            }
            &:last-child {
                .contact-item-left {
                    width: 156px;
                }
                .contact-item-right {
                    margin-left: -135px;
                }
            }
            .contact-item-left {
                h1 {
                    margin: 0;
                    font-size: 18px;
                    font-weight: 400;
                    color: rgba(0, 0, 51, 1);
                    border-bottom: 4px solid #0bd196;
                    padding-bottom: 4px;
                }
            }
            .contact-item-right {
                &:first-child {
                    margin-left: -200px;
                }
                margin-right: 100px;
                margin-top: 70px;
                display: flex;
                .contact-item-right-box {
                    display: flex;
                    margin-right: 60px;
                    ul {
                        margin: 0;
                        padding-left: 0;
                        list-style: none;
                        li {
                            margin-bottom: 10px;
                            display: flex;
                            align-items: center;
                            img {
                                margin-right: 10px;
                                display: block;
                                @include square(32px);
                            }
                            span {
                                font-size: 14px;
                                font-weight: 400;
                                color: rgba(119, 119, 119, 1);
                            }
                        }
                    }
                    .qr-code {
                        margin-left: 30px;
                        display: block;
                        width: 107px;
                        height: 106px;
                    }
                }
            }
        }
    }
}
.footer {
    height: 321px;
    background: #3a3a3e;
    .footer-box {
        height: 321px;
        display: flex;
        align-items: center;
        .footer-box-left {
            width: 415px;
            dl {
                margin: 0;
                dt {
                    img {
                        display: block;
                        width: 96px;
                        height: 26px;
                    }
                    margin-bottom: 20px;
                }
                dd {
                    margin-left: 0;
                    font-size: 12px;
                    line-height: 1.6;
                    font-weight: 400;
                    color: rgba(115, 115, 115, 1);
                    &:first-of-type {
                        margin-bottom: 20px;
                    }
                }
            }
        }
        .footer-box-right {
            display: flex;
            margin-left: 130px;
            dl {
                margin-right: 50px;
                dt {
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    margin-bottom: 30px;
                }
                dd {
                    margin-left: 0;
                    margin-bottom: 15px;
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(115, 115, 115, 1);
                }
            }
        }
    }
}
.home-layer-box {
    width: 800px;
    height: 550px;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    .home-layer-msg {
        padding: 20px 40px;
        overflow-y: scroll;
        height: 450px;
        .home-layer-msg-title {
            margin-top: 10px;
            margin-bottom: 30px;
            text-align: center;
            font-size: 24px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }
        .home-layer-msg-text {
            p {
                margin: 20px 0;
                font-size: 16px;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 2;
                a {
                    color: #000;
                }
            }
        }
    }
    .home-layer-btn {
        margin: 10px auto 0 auto;
        width: 300px;
        height: 42px;
        background: rgba(11, 209, 150, 1);
        border-radius: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            font-size: 16px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }
    }
}

.tips-box {
    width: 100%;
    height: 500px;
    background-image: url('../../static/images/agencybg.png');
    background-size: cover;
    overflow: hidden;
    .tips-content {
        dl {
            width: 748px;
            margin-top: 160px;
            margin-bottom: 0;
            dt {
                font-size: 40px;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                margin-bottom: 30px;
            }
            dd {
                line-height: 1.6;
                margin-left: 0;
                margin-bottom: 10px;
                font-size: 16px;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
            }
        }
    }
}

.preponderance {
    .title {
        padding-top: 79px;
        margin-bottom: 91px;
        width: 350px;
        display: flex;
        align-items: baseline;
        position: relative;
        h1 {
            margin: 0;
            font-size: 32px;
            font-weight: 400;
            color: rgba(11, 209, 150, 1);
        }
        span {
            position: absolute;
            right: 10px;
            bottom: -7px;
            display: block;
            font-size: 24px;
            font-weight: bold;
            font-style: italic;
            color: rgba(0, 213, 115, 1);
            opacity: 0.15;
        }
    }
    .preponderance-list {
        display: flex;
        justify-content: space-around;
        list-style: none;
        padding-bottom: 90px;
        li {
            width: 192px;
            display: flex;
            align-items: center;
            text-align: center;
            flex-direction: column;
            img {
                margin-bottom: 12px;
                display: block;
                @include square(140px);
            }
            span {
                display: block;
                font-size: 16px;
                line-height: 1.6;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
            }
        }
    }
}

.process {
    .title {
        padding-top: 79px;
        margin-bottom: 91px;
        width: 290px;
        display: flex;
        align-items: baseline;
        position: relative;
        h1 {
            margin: 0;
            font-size: 32px;
            font-weight: 400;
            color: rgba(11, 209, 150, 1);
        }
        span {
            position: absolute;
            right: 10px;
            bottom: -7px;
            display: block;
            font-size: 24px;
            font-weight: bold;
            font-style: italic;
            color: rgba(0, 213, 115, 1);
            opacity: 0.15;
        }
    }
    .process-img {
        display: flex;
        img {
            display: block;
            &:first-of-type {
                width: 319px;
                height: 291px;
                margin-right: 150px;
            }
            &:last-of-type {
                margin-top: -212px;
                width: 510px;
                height: 664px;
            }
        }
    }
}
.borer-top-line {
    border-top: 1px solid #eee;
}
.help-title {
    padding: 20px 0;
    font-size: 20px;
    font-weight: bold;
    color: rgba(119, 119, 119, 1);
    margin-bottom: 20px;
}
.help-box {
    display: flex;
    margin-bottom: 20px;
    .help-left {
        width: 213px;
        min-height: 468px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(238, 238, 238, 1);
        .help-left-title {
            margin: 0;
            height: 44px;
            background: #fafafa;
            display: flex;
            align-items: center;
            span {
                padding-left: 12px;
                font-size: 16px;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);
            }
        }
        .help-left-list {
            list-style: none;
            margin: 0;
            padding-left: 0;
            cursor: pointer;
            li {
                width: 100%;
                height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                span {
                    font-size: 14px;
                    font-weight: 400;
                    color: #333;
                }
            }
            .help-left-item-active {
                background: rgba(11, 209, 150, 1);
                span {
                    font-weight: 500;
                    color: #fff;
                }
            }
        }
    }
    .help-right {
        width: 952px;
        overflow: hidden;
        margin-left: 36px;
        .help-right-item {
            pre {
                margin: 0;
            }
            h1 {
                line-height: 1.6;
                font-size: 16px;
                font-weight: bold;
                color: rgba(51, 51, 51, 1);
            }
            p {
                line-height: 1.6;
                font-size: 14px;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
            }
            img {
                background: #ddd;
                width: 100%;
                display: block;
                margin-bottom: 15px;
            }
        }
    }
}

.right-suspend-qq-enter {
    cursor: pointer;
    position: fixed;
    top: 60%;
    right: 0;
    width: 76px;
    height: 76px;
    background: rgba(33, 33, 33, 1);
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        display: block;
        width: 49px;
        height: 50px;
    }
}
.right-suspend-qq-leave {
    cursor: pointer;
    width: 150px;
    height: 236px;
    background: rgba(33, 33, 33, 1);
    opacity: 0.8;
    position: fixed;
    top: 50%;
    right: 0;
    padding: 23px;
    img {
        display: block;
        width: 49px;
        height: 50px;
        margin-bottom: 40px;
    }
    .right-suspend-qq-leave-box {
        div {
            width: 154px;
            height: 38px;
            background: rgba(11, 209, 150, 1);
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 13px;
            span {
                font-size: 14px;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
            }
        }
    }
}

//代码高亮
.hljs {
    font-size: 14px;
    border-radius: 4px;
    display: block;
    padding: 0;
    background: #002b36;
    color: #839496;
    width: 934px;
    white-space: pre-wrap;
    overflow: hidden;
}
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-doctype,
.hljs-pi,
.lisp .hljs-string,
.hljs-javadoc {
    color: #586e75;
}
.hljs-keyword,
.hljs-winutils,
.method,
.hljs-addition,
.css .hljs-tag,
.hljs-request,
.hljs-status,
.nginx .hljs-title {
    color: #859900;
}
.hljs-number,
.hljs-command,
.hljs-string,
.hljs-tag .hljs-value,
.hljs-rules .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula,
.hljs-regexp,
.hljs-hexcolor,
.hljs-link_url {
    color: #2aa198;
}
.hljs-title,
.hljs-localvars,
.hljs-chunk,
.hljs-decorator,
.hljs-built_in,
.hljs-identifier,
.vhdl .hljs-literal,
.hljs-id,
.css .hljs-function {
    color: #268bd2;
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body,
.smalltalk .hljs-number,
.hljs-constant,
.hljs-class .hljs-title,
.hljs-parent,
.haskell .hljs-type,
.hljs-link_reference {
    color: #b58900;
}
.hljs-preprocessor,
.hljs-preprocessor .hljs-keyword,
.hljs-pragma,
.hljs-shebang,
.hljs-symbol,
.hljs-symbol .hljs-string,
.diff .hljs-change,
.hljs-special,
.hljs-attr_selector,
.hljs-subst,
.hljs-cdata,
.clojure .hljs-title,
.css .hljs-pseudo,
.hljs-header {
    color: #cb4b16;
}
.hljs-deletion,
.hljs-important {
    color: #dc322f;
}
.hljs-link_label {
    color: #6c71c4;
}
.tex .hljs-formula {
    background: #073642;
}
/* Tomorrow Night Eighties Theme */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
.tomorrow-comment,
pre .comment,
pre .title {
    color: #999999;
}

.tomorrow-red,
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
    color: #f2777a;
}

.tomorrow-orange,
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
    color: #f99157;
}

.tomorrow-yellow,
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute {
    color: #ffcc66;
}

.tomorrow-green,
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
    color: #99cc99;
}

.tomorrow-aqua,
pre .css .hexcolor {
    color: #66cccc;
}

.tomorrow-blue,
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
    color: #6699cc;
}

.tomorrow-purple,
pre .keyword,
pre .javascript .function {
    color: #cc99cc;
}

pre code {
    display: block;
    background: #2d2d2d;
    color: #cccccc;
    font-family: Menlo, Monaco, Consolas, monospace;
    line-height: 1.5;
    border: 1px solid #ccc;
    padding: 10px;
}
